<template>
  <div class="common-layout" style="height: 100vh;">
    <el-container style="height: 100%;">
      <!-- Aside -->
      <el-aside width="200px" style="height: 100%;">
        <el-row class="tac" style="height: 100%;">
          <el-col :span="24" style="height: 100%;">
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              style="height: 100%;"
            >
              <el-sub-menu index="1">
                <template #title>
                  <el-icon><location /></el-icon>
                  <span>Navigator One</span>
                </template>
                <el-menu-item-group title="Group One">
                  <el-menu-item index="1-1">item one</el-menu-item>
                  <el-menu-item index="1-2">item two</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
              <el-menu-item index="2">
                <el-icon><icon-menu /></el-icon>
                <span>Navigator Two</span>
              </el-menu-item>
              <el-menu-item index="4">
                <el-icon><setting /></el-icon>
                <span>Navigator Four</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-container>
        <!-- header -->
        <el-header style="background-color: #FFFFFF; display: flex; justify-content: flex-end; align-items: center;"> 
          <el-row class="demo-avatar demo-basic">
            <el-col :span="24" style="text-align: right;">
              <div class="demo-basic--circle">
                <div class="block">
                  <el-avatar :size="40" :src="circleUrl" />
                </div>
              </div>
            </el-col>
          </el-row>
        </el-header>
        <!-- main -->
        <el-main style="background-color: #E9EEF3;">
          <h2>文章管理</h2>
          <BaseSearch :input="input" :handleSearch="handleSearch" />
          <el-table :data="tableData" style="width: 100%;margin-top: 20px; text-align: center;">
            <el-table-column prop="order" label="编号" width="160" />
            <el-table-column prop="title" label="文章标题" width="160" />
            <el-table-column prop="author" label="作者" width="160" />
            <el-table-column prop="date" label="日期" width="180" />
            <el-table-column align="center">
              <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                  Edit
                </el-button>
                <el-button
                  size="small"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                >
                  Delete
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import BaseSearch from './BaseSearch.vue';
import { ref } from 'vue'
const input = ref('')
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

type SearchHandler = () => void
const handleSearch = (): void => {
  console.log('搜索功能尚未实现')
}

const handleEdit = (index, row) => {
  console.log(index, row)
}
const handleDelete = (index, row) => {
  console.log(index, row)
}

const tableData = [
  { order: 1, title: '第一篇文章', author: '张三', date: '2022-01-01' },
  { order: 2, title: '第二篇文章', author: '李四', date: '2022-01-02' },
  { order: 3, title: '第三篇文章', author: '王五', date: '2022-01-03' },
  { order: 4, title: '第四篇文章', author: '赵六', date: '2022-01-04' },
  { order: 5, title: '第五篇文章', author: '钱七', date: '2022-01-05' },
]
import { reactive, toRefs } from 'vue'

const state = reactive({
  circleUrl:
    'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
  squareUrl:
    'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
  
})

const { circleUrl, squareUrl } = toRefs(state)

</script>

<style scoped>
  .demo-basic {
    text-align: center;
  }
  .demo-basic .sub-title {
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--el-text-color-secondary);
  }
  .demo-basic .demo-basic--circle,
  .demo-basic .demo-basic--square {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .demo-basic .block:not(:last-child) {
    border-right: 1px solid var(--el-border-color);
  }
  .demo-basic .block {
    flex: 1;
  }
  .demo-basic .el-col:not(:last-child) {
    border-right: 1px solid var(--el-border-color);
  }
  .el-header .el-col {
    text-align: right;
  }
</style>